<template>
	<view>
		<u-popup :show="uShow" mode="bottom"  @close="close" class="u-p" :round="10" :closeable="true" :closeOnClickOverlay="false">
			<view class="btn-flex">
				<view class="title">支付方式</view>
				<view class="price">￥{{params.salePriceRmb || 0}}</view>
			</view>
			<u-radio-group
				v-model="radio"
				:borderBottom="true"
				 size="40"
				placement="column"
				@change="groupChange"
				iconPlacement="right"
			>
				<block v-for="(item,index) in payTypeList">
					<u-radio :customStyle="{marginBottom: '10px',paddingBottom:0}" v-if="item.type !== 'aliCollectConfig' && item.type !=='yeCollectConfig' && item.type !== 'jdCollectConfig'" label="微信支付" :name="item.type"  class="wx-icon" labelSize="28" iconSize="30"/>
					<u-radio :customStyle="{marginBottom:'10px',paddingBottom:0}" v-if="item.type === 'aliCollectConfig'" label="支付宝" name="aliCollectConfig" class='ali-icon' labelSize="28" iconSize="30"/>
					<u-radio :customStyle="{marginBottom:0,paddingBottom:0}"  v-if="item.type === 'yeCollectConfig'" label="余额支付" name="yeCollectConfig" class='yue-icon' labelSize="28" iconSize="30"/>
				</block>
			</u-radio-group>
		</u-popup>
		<u-modal :show="modalShow" @confirm="confirm" ref="uModal" :asyncClose="true" showCancelButton @cancel="modalShow=false">
			当前卡余额不足，请点击 确定 前往充值余额后再来购买套餐。
		</u-modal>
		<passWordDialog :uShow="isShow" :isSetPaw="isSetPaw" @hide="hide" @investOrder="investOrder"/>
	</view>
</template>

<script>
	import passWordDialog from './passWordDialog'
	export default{
		components:{
			passWordDialog
		},
		data(){
			return {
				radio:'',
				orderNo:'',
				isShow:false,
				timer:null,
				isSetPaw:false,
				isOpenAccount:0,
				modalShow:false,
				payTypeList:[]
			}
		},
		props:{
			uShow:{
				type:Boolean,
				default:false
			},
			params:{
				type:Object,
				default:()=>{
					return {
						price:0
					}
				}
			},
		},
		watch:{
			uShow:{
				handler(v){
					if(v){
						// 判断当前用户是否设置过密码
						this.$api.account({iccid: uni.getStorageSync('iccid') || ''}).then(res=>{
							this.isSetPaw = false
							this.isOpenAccount = res.data.isOpenAccount
						})
						this.payTypeList = []
						var anzuo = uni.getSystemInfoSync().platform === 'android' ? '1' : '0'
						this.$api.payChanle({iccid: uni.getStorageSync('iccid') || '',anzuo,isPkgPage:'1'}).then(res=>{
							for (let i = 0; i < res.data.length; i++) {
								this.payTypeList.push({type:res.data[i].typeKey,payType:res.data[i].payType});
							}
						})
						
					}
				},
				deep:true,
				immediate:true
			}
		},
		onLoad(){},
		methods:{
			close(){
				this.$emit('hide')
			},
			groupChange(e){
				if(e === 'yeCollectConfig'){  //余额支付要多掉一个接口
					this.modalShow = this.isOpenAccount === 0
					this.isShow = this.isOpenAccount !== 0
				}else{
					//其他的支付
					var k = this.payTypeList.find(item =>item.type === e)
					this.$api.pkgOrder({...this.params,payType:k.payType}).then(res=>{
						if(res.code === '200'){
							uni.setStorageSync('orderNo',res.data.orderNo)
							if(k.payType === 80){ //支付宝h5支付
								//#ifdef H5
									window.location.href=res.data.payInfo;
								//#endif
								//#ifdef APP-PLUS
									plus.runtime.openURL(res.data.payInfo)
								//#endif
							}else if(k.payType === 88){//支付宝app支付
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: res.data.payInfo, //支付宝订单数据
									success: function(res) {
										console.log('success:' + JSON.stringify(res));
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							}else if(k.payType === 20){// 微信h5支付
								// #ifdef APP-PLUS
								const platform = uni.getSystemInfoSync().platform
								// 创建一个webview
								const webview = plus.webview.create('','http://app.szxxtx.com');
								// 通过webview打开链接，后面加referer表示该链接是从哪里打开的，请填写申请h5支付的域名，比如：http://www.baidu.com,需要已备案
								switch(platform){
								  case 'android':
									webview.loadURL(res.data.payInfo,{'Referer':'http://app.szxxtx.com'});
									break;
								  case 'ios':
									webview.loadURL(res.data.payInfo,{'Referer':'http://app.szxxtx.com://'});
									break;
								  default:
									break;
								}
								// #endif
								// #ifdef H5
								window.open(res.data.payInfo);
								// #endif
							}else if(k.payType === 22||k.payType === 23||k.payType === 24){ //微信小程序支付
								//TODO
								// this.pay.wxpay(1,res.data);
								//#ifdef APP-PLUS
								var data = res.data
								plus.share.getServices(childRes => {
									let sweixin = null;
									for (let i in childRes) {
										if (childRes[i].id == 'weixin') {
											sweixin = childRes[i];
										}
									}
									//唤醒微信小程序
									if (sweixin) {
										sweixin.launchMiniProgram({
											id: 'gh_1c60bd6e4f46', //小程序原始id
											type:0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
											// path: '/pages/index/index?price=100&payType=22&orderNo=HFDKG202311010000067755' //小程序的页面,用传的参数在小程序接值判断跳转指定页面
											path: '/pages/index/index?payType='+data.payType+ '&orderNo='+data.orderNo //小程序的页面,用传的参数在小程序接值判断跳转指定页面
										},
										//目标小程序点击返回App后执行的回调,在此接收binderror="launchAppError"的参数
										res1 => {
											console.log(res1)
										},err => {
											console.log(err)
										});
									}
								});
								//#endif
							}else{ //扫码支付 
								var param = {
									orderNo:res.data.orderNo,
									payUrl:res.data.payUrl,
									payImg:res.data.payImg,
								}
								let base64 = new this.$base64()
								uni.navigateTo({
									url:'/pages/scanCodePayment/index?params='+base64.encode(JSON.stringify(param))
								})
							}
							this.close()
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
					
				}
			},
			confirm(){
				uni.navigateTo({
					url:'/pages/recharge/index',
				})
				this.close()
				this.modalShow=false
			},
			hide(){
				this.isShow = false
			},
			investOrder(data){
				var params = {
					payPass:data,
					isNextMonth:this.params.isNextMonth,
					isAdmin:this.params.isAdmin,
					soldPackageId:this.params.soldPackageId,
					iccid: uni.getStorageSync('iccid') || '',
					mobile: uni.getStorageSync('userPhone') || '',
					primaryId:this.params.primaryId || '',
					secondaryId:this.params.secondaryId || '',
				}
				this.$api.userUniorder(params).then(res=>{
					if(res.code === '200'){
						this.$api.sysUserPkg({orderNo:res.data.id,...params}).then(res=>{
							if(res.code === '200'){
								this.$utils.switchTab('/pages/index/index')
							}else{
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						})
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
					
				
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-p{
		width:calc(100% - 60upx);
		padding:30upx;
		.massage{
			color: #646668;
			font-size: 28upx;
		}
		.u-popup__content{
			padding:0 40upx;
		}
		.btn-flex{
			display: flex;
			justify-content: space-between;
			margin-top:60upx;
			.u-button{
				width:45%;
				height:100upx;
			}
			.price{
				color:red;
			}
		}
		.title{
			margin-bottom:40upx;
			font-size:36upx;
		}
		.u-code-input{
			margin-left: 20px;
			margin-bottom: 20px;
		}
	}
	.wx-icon{
	    background: url('./../static/img/icon09.png') left center no-repeat;
	    background-size:52upx 42upx;
	    padding-left: 70upx;
	    height: 40px;
		line-height: 40px;
	}
	.ali-icon{
	    background: url('./../static/img/icon08.png') left center no-repeat;
	    background-size:52upx 52upx;
	    padding-left:70upx;
		height: 40px;
		line-height: 40px;
	}
	.yue-icon{
	    background: url('./../static/img/icon11.png') left center no-repeat;
	    background-size:52upx 52upx;
	    padding-left:70upx;
		height: 40px;
		line-height: 40px;
	}
</style>